<template>
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/oms/order' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item>退货原因设置</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-card class="box-card" style="margin-top: 50px">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center">
        <el-icon>
          <Tickets />
        </el-icon>
        <p>数据列表</p>
      </div>
      <div><el-button @click="onAddUser">添加</el-button></div>
    </div>
  </el-card>
  <div>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      ref="multipleTableRef"
      style="width: 100%; margin-top: 20px"
      :border="true"
    >
      <el-table-column
        :value="ishow"
        type="selection"
        prop="ischeck"
        width="55"
      />
      <el-table-column prop="id" label="编号" width="120" />
      <el-table-column prop="name" label="原因类型" width="120" />
      <el-table-column
        property="address"
        prop="sort"
        label="排序"
        show-overflow-tooltip
      />
      <el-table-column label="是否启用" width="100">
        <template #default="scope">
          <el-switch
            @change="statuszhuangtai(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="添加时间" width="180">
        <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
        <template #default="scope">
          <div>
            {{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" flex="right">
        <template #default="scope">
          <el-button @click="del(scope.row)">删除</el-button>
          <el-button @click="onEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex; justify-content: space-between; margin-top: 15px">
    <div>
      <el-select
        v-model="value2"
        class="m-2"
        placeholder="批量操作"
        size="large"
        style="padding-right: 15px"
      >
        <el-option value="删除"></el-option>
      </el-select>
      <el-button type="primary" @click="queding">确定</el-button>
    </div>
    <div>
      <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :page-sizes="[1, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <Rexit
    :visible="visible"
    :form="modalForm"
    @cancel="onCloseDialog"
    @confirm="onConfirmDialog"
  ></Rexit>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import * as api from "../../request/api";
import { Tickets } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import type { Ref } from "vue";
import useTable from "../../hooks/useTables";
import type { returnReasonlist } from "../../request/OmsOrderReason/index";
import { ElMessage, ElMessageBox } from "element-plus";
import Rexit from "../../components/c-oms/Rexit.vue";

let ishow = ref(false);
interface User {
  date: string;
  name: string;
  address: string;
}
// 声明ids数组
const multipleSelection = ref<User[]>([]);
let value2 = ref("");
// 新增
let add = false; // false编辑 true 新增
// 模态框
let modalForm = reactive({}) as returnReasonlist;
let {
  tableData,
  getTableData,
  pagination,
  // handleSizeChange,
  // handleCurrentChange,
} = useTable(api.reason.getreturnReasonlist);

//分页
const handleSizeChange = (val: number) => {
  getTableData();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getTableData();
  console.log(`current page: ${val}`);
};

tableData.value.forEach((item) => {
  item.ischeck = true;
});

let onEdit = (row: returnReasonlist) => {
  console.log(row);
  add = false;
  modalForm = row;
  visible.value = true;
};
//删除
let del = (row: returnReasonlist) => {
  ElMessageBox.confirm("你确定删除吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      await api.reason.getreturnReasonlistdel(row.id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      // 确认提交后重新渲染数据
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 添加用户
let onAddUser = () => {
  let newUser = {
    name: "",
    sort: 0,
    status: 0,
  } as returnReasonlist;
  modalForm = newUser;
  add = true;
  visible.value = true;
};
//模态框
let visible = ref(false);
let onCloseDialog = () => {
  visible.value = false;
};
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: returnReasonlist) => {
  console.log(row); // row就是表单数据
  // 二次 确认
  ElMessageBox.confirm("是否确认提交!", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      // 发请求
      // 去判断 是 编辑 还是添加

      row.status = +row.status;

      if (add) {
        await api.reason.getreturnReasonlistadd(row); // 新增
      } else {
        await api.reason.getreturnReasonlistUpdate(row); // 编辑
      }
      visible.value = false;
      ElMessage({
        type: "success",
        message: "操作成功",
      });
      // 确认提交后重新渲染数据
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消提交",
      });
      visible.value = false;
    });
};

// ids
// let idsArray = ref([])

const handleSelectionChange = (val: User[]) => {
  // console.log(val);
  // 遍历所勾选的id
  let valAll = val.map((item: any) => {
    return item.id;
  });
  // 然后放到声明的空数组里面
  multipleSelection.value = valAll;
  console.log(multipleSelection.value);
};

//批量删除 确定
let queding = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage({
      message: "请选择要操作的条目",
      type: "warning",
    });
    return;
  }
  ElMessageBox.confirm("你确定删除吗?", "提示", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      // 确定删除
      // 遍历所得到的ids数组
      multipleSelection.value.forEach(async (item) => {
        await api.reason.getreturnReasonlistdel(item);
        getTableData();
      });

      ElMessage({
        type: "success",
        message: "删除成功",
      });
      // 确认提交后重新渲染数据
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 编辑 修改状态
let statuszhuangtai = async (row: returnReasonlist) => {
  if (row.status === 0) {
    // row.status = 1;
    await api.reason.getreturnReasonlistUpdatestatus(row);
    ElMessage({
      message: "状态修改完成",
      type: "success",
    });
  } else {
    // row.status = 0;
    await api.reason.getreturnReasonlistUpdatestatus(row);
    ElMessage({
      message: "状态修改完成",
      type: "success",
    });
  }
};
getTableData();
</script>

<style lang="scss" scoped>
.containt {
  padding: 20px;
  /* border: 1px solid #ccc; */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border-radius: 4px;
  margin-top: 60px;
  margin-bottom: 20px;

  :deep .el-select .el-input {
    height: 32px;
  }
}
</style>
